<template>
    <div
        :style="{
            boxSizing: 'border-box',
            width: '100%',
            padding: '40px',
            backgroundColor: '#232324',
        }"
    >
        <a-row :gutter="20" :style="{ marginBottom: '20px' }" v-for="(groupRow, rowIndex) in paginatedVpsProviders" :key="rowIndex">
            <a-col :span="8" v-for="(vpsProvider, colIndex) in groupRow" :key="colIndex">
                <!-- 添加自定义类名 card-hover-effect -->
                <a-card class="card-hover-effect" :bordered="false" :style="{ width: '100%', height: '200px' }" :hoverable="true">
                    <template #title>
                        <div style="display: flex; align-items: center; justify-content: space-between;">
                            <!-- 给标题添加自定义类名 -->
                            <a-typography-title class="group-title" :heading="5" :bold="true">{{ vpsProvider.cryptocurrency_supproted_VPSProvider }}</a-typography-title>
                            <a-link @click="goToProviderDetail(vpsProvider.id)">More</a-link>
                        </div>
                    </template>
                    <!-- 给介绍文字添加自定义类名 -->
                    <a-typography-text class="group-description" :ellipsis="{ rows: 3, tooltip: true }">
                        {{ vpsProvider['Reasons to Choose'] }}
                    </a-typography-text>
                    <div>
                        <p>Homepage: <a :href="vpsProvider.Homepage" target="_blank">{{ vpsProvider.Homepage }}</a></p>
                    </div>
                </a-card>
            </a-col>
        </a-row>
        <a-pagination
            :current="currentPage"
            :page-size="pageSize"
            :total="totalCount"
            @change="handlePageChange"
        />
    </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

export default {
    setup() {
        const router = useRouter();
        const vpsProviders = ref([]);
        const currentPage = ref(1);
        const pageSize = ref(9);
        const totalCount = ref(0);

        const paginatedVpsProviders = computed(() => {
            const startIndex = (currentPage.value - 1) * pageSize.value;
            const endIndex = startIndex + pageSize.value;
            const paginated = vpsProviders.value.slice(startIndex, endIndex);
            const result = [];
            for (let i = 0; i < paginated.length; i += 3) {
                result.push(paginated.slice(i, i + 3));
            }
            return result;
        });

        const goToProviderDetail = (id) => {
            router.push({ name: 'ProviderDetails', params: { id } });
        };

        const fetchVpsProviders = async () => {
            try {
                const response = await axios.get('http://localhost:3001/api/vps-providers');
                vpsProviders.value = response.data;
                totalCount.value = vpsProviders.value.length;
                console.log('Loaded VPS providers:', vpsProviders.value);
            } catch (error) {
                console.error('请求后端失败:', error);
            }
        };

        const handlePageChange = (page) => {
            currentPage.value = page;
        };

        onMounted(() => {
            fetchVpsProviders();
        });

        return {
            paginatedVpsProviders,
            goToProviderDetail,
            currentPage,
            pageSize,
            totalCount,
            handlePageChange
        };
    }
};
</script>

<style scoped>
:deep(.arco-card) {
    background-color: #2E2E30;
    border-radius: 8px !important; /* 使用 !important 确保优先级 */
    transition: all 0.3s ease;
    overflow: hidden; /* 确保内容不会溢出圆角 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:deep(.arco-card-header) {
    border: none;
}

/* 设置标题颜色 */
.group-title {
    color: #689FFF;
    font-weight: bold; 
}

/* 设置介绍文字颜色 */
.group-description {
    color: #F6F6F6;
    text-align: left;
}

:deep(.arco-card-body) {
    background-color: #2E2E30;
}

/* 悬浮效果 */
.card-hover-effect:hover {
    transform: translateY(-5px); /* 向上移动 5px */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}
</style>